<script setup>
// < !--导航栏页面，根据路由地址生成导航栏-- >
import { Vue_App_Token } from '@/utils/config'
import { deleteCookie, getCookie } from '@/utils/Storage.js'
import { reactive, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import router from '@/router/beforeEach'
import { message } from 'ant-design-vue';

import store from '@/store'
import {
  SendOutlined,
  AndroidOutlined,
  // KeyOutlined,
  // ContactsOutlined,
  // DesktopOutlined,
  CloseOutlined,
} from '@ant-design/icons-vue'

// 引入现有所有路由地址
import { routes } from '@/router/index'

// import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'

const route = useRoute()
const buttonstatus = ref(false)
const state = reactive({
  collapsed: true,
  selectedKeys: [],
  openKeys: [routes[0].path],
  preOpenKeys: ['sub1'],
})

// const items = reactive(
//     routes.map((route) => {
//         return {
//             key: route.path,
//             icon: route.icon,
//             label: route.meta.routerName,
//             title: route.meta.routerName,
//         }
//     }),
// )


const editbuttonstatus = () => {

  store.commit('Setbuttonstatus', true)
  buttonstatus.value = !buttonstatus.value
}

watch(
  () => route.path,
  (newVal) => {
    state.selectedKeys = [newVal]
  },
)

// const toggleCollapsed = () => {
//     state.collapsed = !state.collapsed
// }

// const handleMenuClick = ({ key }) => {
//     state.selectedKeys = [key]
//     router.push(key)
// }
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
import { Modal } from 'ant-design-vue'
const exitUser = () => {
  if (getCookie(Vue_App_Token)) {
    console.log("已登录");
    Modal.confirm({
      title: '确认退出登录？',
      icon: createVNode(ExclamationCircleOutlined),
      content: '',
      okText: '确认',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        console.log('OK')
        deleteCookie(Vue_App_Token)
        router.push('/login')
      },
      onCancel() {
        console.log('Cancel')
      },
    })
  } else {
    console.log("未登录");
    Modal.confirm({
      title: '还未登录！',
      icon: createVNode(ExclamationCircleOutlined),
      content: '是否需要跳转登录页面？',
      okText: '是',
      okType: 'danger',
      cancelText: '否',
      onOk() {
        console.log('OK')
        deleteCookie(Vue_App_Token)
        router.push('/login')
      },
      onCancel() {
        console.log('Cancel')
      },
    })
  }

  //   deleteCookie(Vue_App_Token)
}
const loginUser = () => {
  if (getCookie(Vue_App_Token)) {
    console.log("已登录");
    message.warning('您已经登录过了，快去查看信息吧~');
  } else {
    console.log("未登录");
    router.push('/login')
  }
}

const jumpTips = (trail) => {
  if (!getCookie(Vue_App_Token)) {
    console.log("未登录");
    message.warning('您还未登录，请先登录~');
    router.push('/login')
  } else {
    console.log("未登录");
    router.push(trail)
  }
}

</script>

<template>
  <div class="content">
    <div id="button-container" :class="`${buttonstatus ? 'button-containers' : ''}`" @click="editbuttonstatus()">
      <!-- 报名 -->


      <button @click="router.push('/about')" class="button" id="baoming">

        <span class="span_text"> 报名 </span>

        <SendOutlined class="span_icon" style="font-size: 1.5rem; color: #fff" />

      </button>


      <!-- 查看用户信息 -->
      <button @click="jumpTips('/userinfo')" class="button" id="userinfo">
        <span> 信息 </span>
        <!-- <ContactsOutlined class="span_icon" style="font-size: 1.5rem; color: #fff" /> -->
      </button>
      <!-- 用户登录注册 -->
      <button @click="loginUser" class="button" id="re-login">
        <span> 登录 </span>
        <!-- <DesktopOutlined class="span_icon" style="font-size: 1.5rem; color: #fff" /> -->
      </button>
      <!-- 重置密码 -->
      <button @click="jumpTips('/resetkey')" class="button" id="resetkey">
        <span> 密码 </span>
        <!-- <KeyOutlined class="span_icon" style="font-size: 1.5rem; color: #fff" /> -->
      </button>
      <!-- 退出登录 -->
      <button @click="exitUser" class="button" id="takeout">
        <span class="span_text"> 退出 </span>
        <CloseOutlined class="span_icon" style="font-size: 1.5rem; color: #fff" />
      </button>
      <button @click="router.push('/')" class="button" id="share">
        <AndroidOutlined style="font-size: 2rem; color: #dfa421" />
      </button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content{
  z-index: 6;
}
#button-container {
  position: relative;
}

.button {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% 50%;
  background: #f4f7f5;
  border: none;
  border-radius: 25px;
  height: 50px;
  width: 50px;
  margin: 20px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease-in;
}

.button .span_text {
  display: none;

}

.button:hover>.span_text {
  display: block;
}

.button:hover>.span_icon {
  display: none;
}

#share {
  background: #098663;
  border: 2px solid #666;
}

#takeout {
  background: linear-gradient(180deg, #50b37986, #0a3b38);
}

#resetkey {
  background: linear-gradient(208deg, #8ce28277, #2e5d42);
}

#re-login {
  background: linear-gradient(-70deg, #d0e1b787, #75b26e);
}

#userinfo {
  // linear-gradient(111deg, #8ce282, #2e5d42);
  background: linear-gradient(111deg, #8ce28281, #2e5d42);
}

#baoming {
  background: linear-gradient(148deg, #50b37980, #0a3b38);
}

.button-containers button {
  rotate: 360deg;
}

.button-containers #share {
  rotate: 270deg;
}

.button-containers>#takeout {
  translate: -300% 50%;
}

.button-containers>#resetkey {
  translate: -226.78% -126.78%;
}

.button-containers>#re-login {
  translate: -50% -200%;
}

.button-containers>#userinfo {
  translate: 126.78% -126.78%;
}

.button-containers>#baoming {
  translate: 200% 50%;
}
</style>
